import React, { Component } from 'react'
import { Card, Divider } from 'antd'
//按需导入
import echarts from 'echarts/lib/echarts'
//导入折线图
import 'echarts/lib/chart/line'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
import ReactEcharts from 'echarts-for-react'
//引入样式
// import './common.less'

class LineA extends Component {
    constructor(props) {
        super(props);
    }
    
        getOption = () => {
            let option = {
                height: '200px',
                grid: {
                    left: "1%",
                    right: "1%",
                    bottom: "1%",
                    width: "100%",
                    height: "100%",
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data: this.props.t5
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '订单量',
                        type: 'bar',
                        barWidth: '30%',
                        data: this.props.p5
                    }
                ]
            }
            return option;
        }
    
    render() {
        return (
            
                <ReactEcharts option={this.getOption()} style={{height: 100, width: 800}}/>

           
            
            
        )
    }
}



class LineB extends Component {
    constructor(props) {
        super(props);
    }
    
        getOption = () => {
            let option = {
                grid: {
                    left: "1%",
                    right: "1%",
                    bottom: "1%",
                    width: "100%",
                    height: "100%",
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data: this.props.t15
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '订单量',
                        type: 'bar',
                        barWidth: '30%',
                        data: this.props.p15
                    }
                ]
            }
            return option;
        }
    
    render() {
        return (
            
                <ReactEcharts option={this.getOption()} style={{height: 100, width: 800}}/>
            
        )
    }
}


class TwoLines extends Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <tr>
               <td style={{display: 'block', width:'100%', height:'100%'}}> <LineA p5={this.props.p5} t5={this.props.t5}/> </td>
               <td style={{display: 'block', width:'100%', height:'100%'}}> <LineB p15={this.props.p15} t15={this.props.t15}/> </td>
            </tr>
        )
    }
}





export default TwoLines;